<template>
  <fl-navBar
    dark
    :border="false"
    title="听课评价"
    left-icon="left"
    color="#333333"
    :fixed="true"
    background-color="#fff"
    status-bar
  />
  <view class="courseEvaluateDetail">
    <view class="coursecontent">
      <uni-collapse v-model="openInfo" ref="collapse">
        <uni-collapse-item
          name="1"
          border
          class="collapse-item"
          title-border="none"
          :border="false"
        >
          <template v-slot:title>
            <view class="doc_msg">
              <text class="line"></text>
              <text class="doc_title">基础信息</text>
            </view>
          </template>
          <view class="detail_content">
            <view class="detail_item">
              <text class="item_key">任务名称</text>
              <text class="item_value">{{ form.taskName }}</text>
            </view>
            <view class="detail_item">
              <text class="item_key">责任人</text>
              <text class="item_value">{{ form.masterName }}</text>
            </view>
            <view class="detail_item">
              <text class="item_key">执行人</text>
              <text class="item_value">{{ form.executorName }}</text>
            </view>
            <view class="detail_item">
              <text class="item_key">到期时间</text>
              <text class="item_value">{{ form.expireDate }}</text>
            </view>
            <view class="detail_item">
              <text class="item_key">任务描述</text>
              <text class="item_value">{{ form.description }}</text>
            </view>
            <view class="detail_item" style="display: flex; flex-direction: column">
              <view class="item_key">附件</view>
              <view class="item_value">
                <fl-fileList
                  v-if="subTaskFiles.length > 0"
                  :closeShow="false"
                  :fileList="subTaskFiles"
                />
              </view>
            </view>
          </view>
        </uni-collapse-item>
      </uni-collapse>

      <!-- 校园巡视信息 -->
      <view class="schoolxunshi" v-if="params.status === '2' || params.status === '3'">
        <view class="doc_msg">
          <text class="line"></text>
          <text class="doc_title">校园巡视信息</text>
        </view>
        <view class="detail_content">
          <uni-forms
            label-position="top"
            label-width="180px"
            :rules="customRules"
            ref="valiForm"
            :modelValue="forms"
          >
            <uni-forms-item label="巡视时间" required name="patrolDate">
              <uni-datetime-picker
                mode="date"
                :clear-icon="false"
                v-model="forms.patrolDate"
              />
            </uni-forms-item>
            <uni-forms-item label="巡视情况及存在问题记录" required name="description">
              <uni-easyinput
                :clearable="false"
                v-model="forms.description"
                type="textarea"
                placeholder="请输入巡视情况及存在问题记录"
              />
            </uni-forms-item>
            <uni-forms-item label="提出意见和建议:" required name="feedback">
              <uni-easyinput
                :clearable="false"
                v-model="forms.feedback"
                type="textarea"
                placeholder="请输入提出意见和建议"
              />
            </uni-forms-item>
            <uni-forms-item label="审核人" required name="checkerName">
              <view @tap="handleApprar" class="appealBtn">{{
                forms.checkerName ? forms.checkerName : "请选择审核人"
              }}</view>
            </uni-forms-item>
            <uni-forms-item label="附件" required>
              <uni-file-picker
                v-if="params.status === '2'"
                @select="handleUpload($event)"
                v-model="fileList"
                :auto-upload="true"
                file-mediatype="all"
                mode="list"
              />
              <fl-fileList
                v-if="fileList.length > 0"
                @delFileItem="delFileItem"
                :closeShow="closeShowTingke"
                :fileList="fileList"
              />
            </uni-forms-item>
          </uni-forms>
        </view>
        <view class="confire" :style="{ bottom: safeAreaInsets.bottom + 'px' }">
          <button
            v-if="params.status === '2'"
            style="width: 90%"
            type="primary"
            @click="submit('valiForm')"
          >
            提交
          </button>
        </view>
      </view>
    </view>
  </view>
  <view v-if="userShow">
    <fl-userList @close="userShow = false" @keepUser="keepUser" :show="userShow" />
  </view>
</template>

<script setup>
import { ref, nextTick } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { superviseTask } from "@/api/supervisionMaster/supervisionSubTask";
import { upload } from "@/utils/upload";
const { safeAreaInsets } = uni.getSystemInfoSync();
import modal from "@/plugins/modal";
const openInfo = ref(["1"]);
const userShow = ref(false);

const collapse = ref();
const closeShowTingke = ref(true);
const fileList = ref([]);
const valiForm = ref();
const subTaskFiles = ref([]);

const form = ref({});
const forms = ref({});
const params = ref({});

const customRules = {
  patrolDate: {
    rules: [
      {
        required: true,
        errorMessage: " ",
      },
    ],
  },
  description: {
    rules: [
      {
        required: true,
        errorMessage: " ",
      },
    ],
  },
  feedback: {
    rules: [
      {
        required: true,
        errorMessage: " ",
      },
    ],
  },
  checkerName: {
    rules: [
      {
        required: true,
        errorMessage: " ",
      },
    ],
  },
};
const delFileItem = (a) => {
  fileList.value.splice(a, 1);
};
function keepUser(ele) {
  forms.value.checker = ele[0].userId;
  forms.value.checkerName = ele[0].name;
  userShow.value = false;
}
function submit(ref) {
  valiForm.value
    .validate()
    .then(async (res) => {
      let par = {
        ...uni.getStorageSync("courses"),
        ...forms.value,
        filePath: JSON.stringify(fileList.value),
        approveStatus: "1",
      };
      await superviseTask(par);
      modal.msgSuccess("操作成功");
      setTimeout(() => {
        uni.navigateBack();
      }, 200);
    })
    .catch((err) => {
      console.log(err);
      if (fileList.value.length === 0) return modal.msgError("请上传附件");
    });
}
function handleApprar() {
  userShow.value = true;
}
async function handleUpload(e) {
  let tempFilePaths = e.tempFilePaths;
  tempFilePaths.forEach(async (ele, index) => {
    const res = await upload({ filePath: ele });
    const re = res.data[0];
    fileList.value.push({ ...re });
    modal.msgSuccess("上传成功");
  });
}
async function getList() {
  let cur = uni.getStorageSync("courses");
  if (cur) {
    form.value = { ...cur.masterTaskInfo, executorName: cur.executorName };
    if (cur.masterTaskInfo.filePath) {
      subTaskFiles.value = JSON.parse(cur.masterTaskInfo.filePath);
    }
    if (params.value.status === "3") {
      forms.value = { ...cur };
      if (cur.filePath) {
        fileList.value = JSON.parse(cur.filePath);
        closeShowTingke.value = false;
      }
    }
    // if (cur.filePath) {
    //   filePath.value = JSON.parse(cur.filePath);
    // }
    // // 校园巡视信息 附件
    // if (cur.masterTaskInfo) {
    //   if (cur.masterTaskInfo.filePath) {
    //     masterTaskInfoFiles.value = JSON.parse(cur.masterTaskInfo.filePath);
    //   }
    // }
  }
  nextTick(() => {
    collapse.value.resize();
  });
}

onLoad((options) => {
  params.value = options;
  getList();
});
</script>

<style lang="scss" scoped>
.confire {
  width: 100%;
  flex: 1;
  display: flex;
  justify-content: space-around;
  padding-top: 100rpx;
}
.w710 {
  width: 710rpx;
  margin: 0 auto;
  padding: 20rpx 10rpx;
}
.teachersfile {
  display: flex;
  flex-wrap: wrap;
}
.appealBtn {
  display: flex;
  align-items: center;
  padding-left: 20rpx;
  width: 100%;
  height: 70rpx;
  border: 1px solid #dcdfe6;
  border-radius: 10rpx;
  color: gray;
}
page {
  display: flex;
  flex-direction: column;
}
.detail_content {
  width: 710rpx;
  margin: 0 auto;
  background-color: #fff;
  .coursecontent_tabs {
    margin-top: 20rpx;
  }
  .appear_container {
    width: 710rpx;
    margin: 0 auto;
  }
}
.fileWrap {
  display: flex;
  flex-direction: column;
}
.confire {
  // position: fixed;
  // bottom: 0;
  // left: 0;
  width: 100%;
  flex: 1;
  display: flex;
  justify-content: space-around;
  margin-top: 30rpx;
}
.courseEvaluateDetail {
  height: 100%;
  overflow-y: scroll;
  background-color: #fff;
  .w710 {
    width: 710rpx;
    margin: 0 auto;
    padding: 20rpx 10rpx;
  }
  .detail_item {
    display: flex;
    padding: 20rpx 10rpx;
    background-color: #fff;
    border-bottom: 2rpx solid #ebedf0;

    .item_key,
    .item_value {
      color: #666666;
      font-size: 28rpx;
    }
    .item_key {
      width: 180rpx;
    }
    .item_value {
      flex: 1;
      color: #333333;
    }
  }
  .doc_msg {
    display: flex;
    align-items: center;
    height: 100rpx;
    font-size: 32rpx;
    font-weight: 700;
    color: #000;
    padding-left: 25rpx;

    .line {
      width: 6rpx;
      height: 30rpx;
      background-color: #2362a6;
      margin-right: 12rpx;
    }
  }
  .coursecontent {
    overflow-y: scroll;
    height: 100%;
  }
  .course_contentItem {
    margin-top: 40rpx;
  }
  .zxqk {
    display: flex;
    height: 100%;
    .zxqk_item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 25%;
      flex-wrap: wrap;
      .statustext {
        margin-top: 10rpx;
      }
      .statusItem {
        position: relative;
        width: 110rpx;
        height: 110rpx;
        border-radius: 50%;
        .playStstus {
          position: absolute;
          top: 50%;
          width: 100%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 24rpx;
          text-align: center;
        }
        .statusImg {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .ddzfile {
    display: flex;
    flex-wrap: wrap;
    .ddzfile_item {
      display: flex;
      justify-content: center;
      width: 50%;
      margin-bottom: 30rpx;

      img {
        width: 60rpx;
        height: 66rpx;
        margin-right: 26rpx;
      }
      .pdfNamebox {
        .pdfName {
          width: 220rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .pdfSize {
          font-size: 24rpx;
          color: #3f3f3f;
          margin-top: 6rpx;
        }
      }
    }
  }
  .collapse-item {
    height: 100%;
    background-color: #fff;
  }
}
</style>
